<template>
  <view class="container">
    <!-- 头部导航 -->
    <view class="header flex items-center justify-between p-[32rpx] border-b border-gray-100">
      <IconFont name="arrow-left" size="32rpx" class="text-gray-600" @click="goBack" />
      <text class="text-[36rpx] font-bold text-gray-800">设置登录密码</text>
      <view class="w-[32rpx]"></view>
    </view>

    <!-- 表单区域 -->
    <view class="form-container p-[32rpx]">
      <nut-form :model="formData">
        <!-- 当前密码 -->
        <nut-cell-group>
          <nut-cell title="当前密码" is-link required>
            <view class="flex items-center w-full">
              <nut-input
                v-model="formData.oldPassword"
                :type="oldPasswordVisible ? 'text' : 'password'"
                placeholder="请输入当前密码"
                placeholder-class="text-gray-400"
                class="flex-1 text-[28rpx]"
              />
              <IconFont
                :name="oldPasswordVisible ? 'eye-open' : 'eye-close'"
                size="32rpx"
                class="text-gray-400 ml-[20rpx]"
                @click="togglePasswordVisibility('oldPassword')"
              />
            </view>
          </nut-cell>

          <!-- 新密码 -->
          <nut-cell title="新密码" is-link required>
            <view class="flex items-center w-full">
              <nut-input
                v-model="formData.newPassword"
                :type="newPasswordVisible ? 'text' : 'password'"
                placeholder="请设置新密码"
                placeholder-class="text-gray-400"
                class="flex-1 text-[28rpx]"
              />
              <IconFont
                :name="newPasswordVisible ? 'eye-open' : 'eye-close'"
                size="32rpx"
                class="text-gray-400 ml-[20rpx]"
                @click="togglePasswordVisibility('newPassword')"
              />
            </view>
          </nut-cell>

          <!-- 确认新密码 -->
          <nut-cell title="确认新密码" is-link required>
            <view class="flex items-center w-full">
              <nut-input
                v-model="formData.confirmPassword"
                :type="confirmPasswordVisible ? 'text' : 'password'"
                placeholder="请再次输入新密码"
                placeholder-class="text-gray-400"
                class="flex-1 text-[28rpx]"
              />
              <IconFont
                :name="confirmPasswordVisible ? 'eye-open' : 'eye-close'"
                size="32rpx"
                class="text-gray-400 ml-[20rpx]"
                @click="togglePasswordVisibility('confirmPassword')"
              />
            </view>
          </nut-cell>
        </nut-cell-group>

        <!-- 提交按钮 -->
        <view class="mt-[60rpx] px-[30rpx]">
          <nut-button
            type="primary"
            size="large"
            :loading="submitting"
            @click="submitForm"
            class="h-[88rpx] rounded-[44rpx] text-[32rpx]"
          >
            确认修改
          </nut-button>
        </view>
      </nut-form>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { showToast } from '@tarojs/taro'
import { Cell, CellGroup, Form, Input, Button } from '@nutui/nutui-taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { post } from '@/utils/request'

// 表单数据
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码可见性
const oldPasswordVisible = ref(false)
const newPasswordVisible = ref(false)
const confirmPasswordVisible = ref(false)

// 提交状态
const submitting = ref(false)

// 返回上一页
const goBack = () => {
  Taro.navigateBack()
}

// 切换密码可见性
const togglePasswordVisibility = (type) => {
  switch(type) {
    case 'oldPassword':
      oldPasswordVisible.value = !oldPasswordVisible.value
      break
    case 'newPassword':
      newPasswordVisible.value = !newPasswordVisible.value
      break
    case 'confirmPassword':
      confirmPasswordVisible.value = !confirmPasswordVisible.value
      break
  }
}

const data = ref({
  oldpassword: 'ParJNsYxoIUzlH77000',
  password: 'ParJNsYxoIUzlH77'
})
const password = async() => {
  const res = await post('/user/updateLoginPassword',data)
  console.log(res)
}

// 提交表单
const submitForm = async () => {
  password()
  // 简单验证：检查是否为空
  if (!formData.value.oldPassword || !formData.value.newPassword || !formData.value.confirmPassword) {
    showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  // 检查两次密码是否一致
  if (formData.value.newPassword !== formData.value.confirmPassword) {
    showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }
  
  submitting.value = true
  
  try {
    // 调用API修改密码
    const res = await post({
      url: '/user/updateLoginPassword',
      data: {
        oldPassword: formData.value.oldPassword,
        password: formData.value.newPassword
      }
    })
    
    if (res.code === 0) {
      showToast({
        title: '密码修改成功',
        icon: 'success'
      })
      
      // 延迟后返回上一页
      setTimeout(() => {
        Taro.navigateBack()
      }, 1500)
    } else {
      showToast({
        title: res.message || '修改失败，请重试',
        icon: 'none'
      })
    }
  } catch (error) {
    showToast({
      title: '网络错误，请稍后再试',
      icon: 'none'
    })
  } finally {
    submitting.value = false
  }
}
</script>

<style lang="scss">
.container {
  width: 750rpx;
  min-height: 100vh;
  background-color: #f7f8fa;
}

.header {
  background-color: #ffffff;
}

.form-container {
  background-color: #ffffff;
  margin-top: 24rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.text-gray-400 {
  color: #909399;
}

.text-gray-500 {
  color: #606266;
}

.text-gray-600 {
  color: #303133;
}

.text-gray-800 {
  color: #1E1E1E;
}

.text-success {
  color: #00B42A;
}

.bg-gray-100 {
  background-color: #F5F7FA;
}

.bg-gray-50 {
  background-color: #FAFAFA;
}

.bg-red-500 {
  background-color: #F56C6C;
}

.bg-orange-500 {
  background-color: #FF9800;
}

.bg-yellow-500 {
  background-color: #E6A23C;
}

.bg-green-500 {
  background-color: #00B42A;
}
</style>